import React, { useState, useEffect } from 'react';
import { Col, message, Select } from 'antd';
import '../index.less'
import services from '../../../services/api';
import Pies from './pie'
const {Option} = Select
export default function spread(props) {
  const [spreadData, setSpreadData] = useState(props.data); // 数据
  const [selectType, setSelectType] = useState('total');
  useEffect(() => {
    if (Object.keys(props.data).length) {
      const datas = reastRisk(props.data);
      setSpreadData(datas);
    }
  }, [props.data]);
  const labeOptions = {
    show: false, // 是否显示文字
    fontSize: '14',
  };
  // 切换
  function handleChange(value) {
    const params = {
      ...props.requestParam,
      level: value
    };
    setSelectType(value);
    services[props.actionType].requestDistributed(params).then(res => {
      if (!res.code) {
        const datas = reastRisk(res.data);
        setSpreadData(datas);
      } else {
        message.error(res.msg);
      }
    });
  }
  // 循环风险类型
  function reastRisk(data) {
    if (data.products.requests.length > 5) {
      data.products.requests = getNewList(data.products);
    }
    if (data.events.requests.length > 5) {
      data.events.requests = getNewList(data.events);
    }
    if (data.riskTypes.requests.length > 5) {
      data.riskTypes.requests = getNewList(data.riskTypes);
    }
    return data
  }
  // 获取新数据
  function getNewList(data) {
    const totals = data.total
    const newList = data.requests.splice(0, 5);
    const nums = newList.reduce((pre, next) => {
      return pre + next.value
    }, 0);
    newList.push({
      key: '其他',
      name: '其他',
      value: totals - nums
    })
    return newList
  };
   // 下载
  function downFile () {
    const params = {
      ...props.requestParam,
      level: selectType
    }
    props.downFile && props.downFile(params, 'd2');
  };
  return (
    <>
      <div className='title-dash-boxs'>
        <p>请求分布</p>
        <div className='title-dash-children'>
          {!props.isDisable ? (<><p onClick={downFile}>下载数据</p>
          <div>
            <Select
              style={{ width: 150 }}
              placeholder="请选择"
              value={selectType}
              onChange={handleChange}
            >
            <Option value={'total'}>请求总量</Option>
            <Option value={'reject'}>拒绝请求量</Option>
            <Option value={'review'}>复核请求量</Option>
            <Option value={'pass'}>通过请求量</Option>
           </Select>
          </div></>
          ) : (<>{''}</>)
         }
        </div>
      </div>
      <div className='spread-boxs'>
        <Col key={1} span={8}>   
           <Pies 
             labelOption={labeOptions}
             data={(Object.keys(spreadData).length && spreadData.products.requests) || []}
             isLegend={true}
             title='产品分布'
             ></Pies>
        </Col>
        <Col key={2} span={8}>   
           <Pies 
             labelOption={labeOptions}
             data={(Object.keys(spreadData).length && spreadData.events.requests) || []}
             isLegend={true}
             title='事件分布'
             ></Pies>
        </Col>
        <Col key={3} span={8}>   
           <Pies 
             labelOption={labeOptions}
             isLegend={true}
             data={(Object.keys(spreadData).length && spreadData.riskTypes.requests) || []}
             title='风险类型分布'
             ></Pies>
        </Col>
      </div>
    </>
  )
}